<template>
  <div class="bg">
    <el-header :style="'margin-bottom:'+ headerBottom +'px'">
      <h2 class="logo">
        蓝鲸毕设快速开发框架
      </h2>
      <div class="bg-purple-light">
        <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" style="border: none;"
                 background-color="rgba(0,0,50,0)" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item @click.native.stop="$router.push({ name: 'index' })"  style=" padding: 0 50px !important;">
           首页
          </el-menu-item>
          <el-menu-item :index="item.path" v-for="item in menulist" :key="item.id" @click="menuAway">
            <!--                文本-->
            {{ item.authName }}
          </el-menu-item>
        </el-menu>
      </div>

      <div v-if="islogin" class="bg-purple">
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <el-avatar class="user-avatar" :src="avatar" @error="errorHandler">
              <i class="el-icon-s-custom"/>
            </el-avatar>
            <p class="avatar-Name">{{ name }}</p>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link target="_blank" to="/index">
              <el-dropdown-item>管理博客</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-else class="bg-purple">
        <div class="avatar-wrapper">
          <p class="avatar-Name" @click="tologin">登录|注册</p>
        </div>
      </div>
    </el-header>
    <el-row :gutter="20">
      <el-col :sm="3" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
      <el-col :xs="24" :sm="18" style="align-content: center">
        <el-card style="background-color: rgba(255,255,255,0.9);margin-top: 15px;align-content: center;">
          <router-view></router-view>
        </el-card>
      </el-col>
      <el-col :sm="3" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    </el-row>
    <el-footer height="40px">
      <cmsFooter></cmsFooter>
    </el-footer>
  </div>

</template>


<script>
import cmsFooter from './Footer.vue'
import { MENU_ITEMS } from './menu';
export default {
  data() {
    return {
      activeIndex: 'this.$router.path',
      islogin: false,
      searchInput: true,
      menuHiddenVisiable: false,
      headerBottom: 0,
      queryInfo: {
        query: '',
        timer: null
      },
      searchList: [],
      searching: false,
      menulist: MENU_ITEMS,
    }
  },
  components: {
    cmsFooter
  },
  methods: {
    //收起菜单
    menuAway() {
      this.menuHiddenVisiable = false;
      this.headerBottom = 0;
    },
    tologin() {
      this.$router.push({
        path: "/login"
      });
    },
    login() {
      let token = getToken();
      if (token == null || token == '') {
        this.islogin = false;
      } else {
        this.islogin = true;
      }
    },
    errorHandler() {
      return true
    },
    logout() {

    }
  }
}
</script>

<style scoped>
.bg{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(~@/assets/img/bg1.png);
  background-size: cover;
}
.el-menu-item{
  padding: 0 50px !important;
}

.el-header {
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
  transition: .2s;
}

.el-header:hover {
  opacity: 1 !important;
}

.el-menu {
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0) !important;
}

.el-menu /deep/ .el-menu-item {
  background-color: rgba(0, 0, 0, 0) !important;
}


.el-menu /deep/ .el-menu-item i {
  color: rgba(255, 255, 255);
}

.el-menu /deep/ .el-menu-item:hover i {
  color: white;
}

.el-menu /deep/ .el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.search_input {
  position: relative;
  box-sizing: border-box;
}




.bg-purple-light {
  float: right;
}

.bg-purple {
  float: right;
}

.avatar-container {
  margin-right: 30px;
}

.avatar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-Name {
  margin-left: 10px;
  cursor: pointer;
  float: right;
  font-size: 16px;
  color: #ffffff;
}

.logo {
  float: left;
  color: #ec9a01;
  font-weight: bold;
}

.logo:hover {
  cursor: pointer;
}

.menu-expend {
  display: none !important;
}

/* 窗口可视区域小于1000隐藏搜索框 */
@media screen and (max-width: 1000px) {
  .search_input {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .el-menu /deep/ .el-menu-item {
    background-color: rgba(0, 0, 0, 0.3) !important;
  }

  .el-menu-demo {
    display: none;
  }

  .menu-expend {
    display: block !important;
    float: right;
  }

  .menu-expend:hover {
    color: #ffd04b;
    cursor: pointer;
  }
}
</style>
